<template>
  <div >
    todo list
      <div>
        <input v-model="inputValue" >
        <button @click="handleSubmit"> Submit</button>
      </div>
      <ul>
        <todo-item v-for="(item,index) of todoList" 
        v-bind:key="index"
        :content="item"
        :index="index"
        @delete="handleDeleteItem" >
         </todo-item>
      </ul>
  </div>
</template>

<script>
import TodoItem from "./components/TodoItem";
export default {
  components: { 'todo-item':TodoItem },
  data: function() {
    return {
      inputValue: "",
      todoList: []
    };
  },
  methods: {
    handleSubmit: function() {
      this.todoList.push(this.inputValue), (this.inputValue = "");
    },
    handleDeleteItem: function(index) {
      this.todoList.splice(index, 1);
    }
  }
};
</script>

<style>
</style>
